<template>
  <div class="branchIncome">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
    <div class="heading">收入分析：<span class="redTitle">分产品、分专业收入拉动情况</span></div>
    <div class="content clearfix">
      <div class="contentLeft">
        <div class="growthRate">
          <div class="marg"><span class="weightFont"><span class="lingxing"></span>基本面收入负拉动：</span></div>
          <div class="marg"><span class="normalFont sign">基本面收入同比{{basicTbYearIncreaseAmt}}亿元,<span class="normalRedFont">{{basicLdIncome}}pp</span></span></div>
        </div>
        <div class="growthRate">
          <div class="marg"><span class="weightFont"><span class="lingxing"></span>产业数字化（省内）收入{{ldDesc}}：</span></div>
          <div class="marg"><span class="normalFont sign">产业数字化（省内）收入同比{{dictTbYearIncreaseAmt}}亿元,<span class="normalRedFont">{{dictLdIncome}}pp</span></span></div>
        </div>
        <div class="growthRate">
          <div class="marg"><span class="weightFont"><span class="lingxing"></span>各{{currentLvlName}}分专业收入拉动情况</span></div>
          <div class="marg"><span class="normalFont sign">基本面收入：<span class="normalRedFont">{{basicLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span>
          </div>
          <div class="marg"><span class="normalFont weightFont">移动收入<span class="normalRedFont">{{mobileLdIncome}}pp：</span><span
              class="normalRedFont">{{mobileLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <div class="marg"><span class="normalFont weightFont">物联网<span class="normalRedFont">{{internetLdIncome}}pp：</span><span
              class="normalRedFont">{{internetLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <!-- <div class="marg"><span class="normalFont sign">ICT收入：<span class="normalRedFont">{{ictLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div> -->
          <div class="marg"><span class="normalFont sign">IDC收入：<span class="normalRedFont">{{idcLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <div class="marg"><span class="normalFont sign">行业云收入：<span class="normalRedFont">{{hyyLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <div class="marg"><span class="normalFont sign">数字平台和大数据（省内）：<span class="normalRedFont">{{numberLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <div class="marg"><span class="normalFont sign">组网专线：<span class="normalRedFont">{{zwLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <div class="marg"><span class="normalFont sign">物联网：<span class="normalRedFont">{{wlwLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div>
          <!-- <div class="marg"><span class="normalFont sign">互联网金融：<span class="normalRedFont">{{hlwLastThreeArea}}</span><span class="normalFont">拉动排名{{currentLvlName}}后三。</span></span></div> -->
        </div>
      </div>
      <div class="contentRight">
<!--        <div class="topEchart">
          <div class="contentTitle">2020年1-2月份<span class="redTitle">各产品、分专业收入拉动情况</span>预算完成率</div>
          <div class="lackData">
              <ul class="gapOfTitle">
                <li v-for="(item,index) in ldIncomeData" :key="index" >{{item}}</li>
              </ul>
           </div>
          <ldIncome :ldIncomeEchart='ldIncomeEchart'></ldIncome>
          <div class="lackData">
              <ul class="totleTitle">
               <li class="second"><span>基本面收入(合计拉动)</span></li>
               <li class="third"><span>ICT+IDC</span></li>
              </ul>
           </div>
        </div> -->
        <div>
          <div class="title">{{acctMonth}}同比增长各{{currentLvlName}}分产品、分专业收入拉动因素情况</div>
          <div class="tableBox">
            <el-table border stripe style="width: 100%" class="tableTh28" ref="table" :data="tableData" :span-method="arraySpanMethod">
              <el-table-column label="分产品 分专业" prop="indexClass" class-name="first-title" min-width="20"></el-table-column>
              <el-table-column label="分产品 分专业" prop="indexName" class-name="second-title" min-width="70"></el-table-column>
              <el-table-column v-for="(item,index) in cloList" :prop="'ldIncome'+index" :label="item" :key="index"
                min-width="40">
                  <template slot-scope="scope">
                    <span v-if="scope.row['ldIncome'+index]>0"  style="color:#5585bf">{{scope.row['ldIncome'+index]}}</span>
                    <span v-else style="color: #c00000">{{scope.row['ldIncome'+index]}}</span>
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ldIncome from "@/views/budget/showPdf/showEchart/ldIncome";
  import { getCookie } from "@/common/js/cookie"
  import { $budgetAPI } from "@/api";
  import { mergeSpan } from "@/utils/mixin";
  export default {
    name: "branchIncome",
    components: {
      ldIncome,
    },
    props: ["areaId", "month", "currentLvlName"],
    created(){
      console.log('currentLvlName',this.currentLvlName);
    },
    data() {
      return {
        basicTbYearIncreaseAmt: '',
        basicLdIncome: '',
        dictLdIncome:'',
        dictTbYearIncreaseAmt: '',
        ldDesc: '',
        mobileLdIncome: '',
        internetLdIncome: '',
        tableData: [],
        cloList: [],
        spanArr: [],
        ldIncomeData: [],
        ldIncomeEchart: {},
        tableData1:[],
        cloList1:[],
        basicLastThreeArea:'',
        mobileLastThreeArea:'',
        internetLastThreeArea:'',
        ictLastThreeArea:'',
        idcLastThreeArea:'',
        hyyLastThreeArea: '',
        numberLastThreeArea: '',
        zwLastThreeArea: '',
        wlwLastThreeArea: '',
        hlwLastThreeArea: '',
        acctMonth:'',
      }
    },
    methods: {
      // 或取
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex == 0 || columnIndex == 1) {
          return this.spanArr[rowIndex][columnIndex];
        }
      },
      getLdIncomeByProAndMajor() {
        var that = this
        let token = getCookie('token');
        $budgetAPI.getLdIncomeByProAndMajor({
            token: token,
          areaId:this.areaId,
          acctMonth:this.month
          },
          res => {
            if (res && res.code == 0) {
              that.acctMonth=res.content.acctMonth+'月'
              that.basicTbYearIncreaseAmt = this.upOrDown(res.content.basicTbYearIncreaseAmt,'减少','增多')
              that.basicLdIncome =  this.upOrDown(res.content.basicLdIncome,'负拉动','正拉动')
              that.dictLdIncome =  this.upOrDown(res.content.dictLdIncome,'负拉动','正拉动')
              that.dictTbYearIncreaseAmt =  this.upOrDown(res.content.dictTbYearIncreaseAmt,'减少','增多')
              if (res.content.dictLdIncome > 0) {
                that.dictLdIncome = '正拉动' + res.content.dictLdIncome
                if (res.content.dictLdIncome > 3) {
                  that.ldDesc = '正拉动明显'
                } else {
                  that.ldDesc = '正拉动'
                }
              } else {
                that.dictLdIncome = '负拉动' + Math.abs(res.content.dictLdIncome)
                if (res.content.dictLdIncome < -3) {
                  that.ldDesc = '负拉动明显'
                } else {
                  that.ldDesc = '负拉动'
                }
              }
              that.mobileLdIncome =  this.upOrDown(res.content.mobileLdIncome,'负拉动','正拉动')
              that.internetLdIncome = this.upOrDown(res.content.internetLdIncome,'负拉动','正拉动')
              that.basicLastThreeArea = res.content.basicLastThreeArea
              that.mobileLastThreeArea = res.content.mobileLastThreeArea
              that.internetLastThreeArea = res.content.internetLastThreeArea
              that.ictLastThreeArea = res.content.ictLastThreeArea
              that.idcLastThreeArea = res.content.idcLastThreeArea

              that.hyyLastThreeArea = res.content.hyyLastThreeArea
              that.numberLastThreeArea = res.content.numberLastThreeArea
              that.zwLastThreeArea = res.content.zwLastThreeArea
              that.wlwLastThreeArea = res.content.wlwLastThreeArea
              that.hlwLastThreeArea = res.content.hlwLastThreeArea
              // 表格数据
              that.cloList = res.content.areaNames
              res.content.localNetDataList.map((item, index) => {
                item.dataList.map((ele, ind) => {
                  item['ldIncome' + ind] = ele.ldIncome
                })
              })
              that.tableData = res.content.localNetDataList
              that.spanArr = mergeSpan(that.tableData, [
                "indexClass",
                "indexName",
              ]);
              // 柱状图数据
              let obj = {
                xAxis: [],
                yAxis: [],
              };
              res.content.proAndMajorDataList.map((item, index) => {
                obj.xAxis[index] = item.indexName
                obj.yAxis[index] = item.tbYearIncreaseAmt
                that.ldIncomeData[index] = item.ldIncome
              })
              for(let i=0;i<that.ldIncomeData.length;i++){
                if( i==0 || i==that.ldIncomeData.length-1 ){
                   that.ldIncomeData[i]=that.ldIncomeData[i]+'%'
                }else{
                  that.ldIncomeData[i]=that.ldIncomeData[i]+'pp'
                }
              }
              that.ldIncomeEchart = obj
              let date1 = {};
              res.content.proAndMajorDataList.map((item,index)=>{
                that.cloList1[index] = item.indexName
                   date1['indexClass' + index] = item.indexClass
              })
              that.tableData1.push(date1)
            } else {
              this.alertError(res);
            }
            setTimeout(() => {
              this.$refs.table.doLayout();
            }, 500);
          },
          err => {}
        )
      },
      upOrDown(ele,downTitle,upTitle){
        if(ele == ''||ele == null){
          ele = ''
        }else{
          if(ele >0){
            ele = upTitle+ele
          }else{
             ele = downTitle+ele*-1
          }
        }
          return ele;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .branchIncome {
    padding: 20px;
    border: 1px solid #dee5f3;
    border-radius: 5px;
    margin-top: 20px;
     position: relative;
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
    .heading {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 40px;
      .redTitle {
        color: #c00000
      }
    }
    .content {
      display: flex;
      .content.clearfix:after,content:before{
        content: "";
        display: table;
      }
      .content.clearfix:after{
        clear: both;
      }
      .content.clearfix{
        *zoom: 1;
      }
      .contentLeft {
        display: inline-block;
        height: 100%;
        flex:3;
        margin-right: 10px;
        .growthRate {
          margin-bottom: 40px;
          .marg {
            margin-bottom: 10px;
            .weightFont {
              font-size: 18px;
              font-weight: 700;
              .lingxing {
                width: 10px;
                height: 10px;
                background-color: #c00000;
                transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                /* Internet Explorer */
                -moz-transform: rotate(45deg);
                /* Firefox */
                -webkit-transform: rotate(45deg);
                /* Safari 和 Chrome */
                -o-transform: rotate(45deg);
                /* Opera */
                margin-right: 7px;
                display: inline-block;
              }
            }
            .normalFont {
              font-size: 16px;
              &.weightFont {
                padding-left: 20px;
                display: inline-block;
                position: relative;
                font-weight: 700;
                &::before{
                   content: '-';
                   color: #333;
                   position: absolute;
                   left:0;
                }
              }
              &.sign{
                  padding-left: 20px;
                  display: inline-block;
                  position: relative;
                  &::before{
                     content: '\2714';
                     color: #333;
                     position: absolute;
                     left:0;
                  }
                }
            }
            .normalBuleFont {
              font-size: 16px;
              color: #5585bf;
            }
            .normalRedFont {
              font-size: 16px;
              color: #c00000;
            }
            .weightRedlFont {
              font-size: 16px;
              color: #c00000;
              font-weight: 700;
            }
          }
        }
      }
      .contentRight {
        flex:7;
        display: inline-block;
        float: right;
        // height: 560px;
        .topEchart {
          width: 100%;
          position: relative;
          border: 1px solid #e5e5e5;
          border-radius: 10px;
          padding: 20px 0;
          display: inline-block;
          height: 300px;
          &:before {
            content: "";
            position: absolute;
            left: 10%;
            top: -2px;
            width: 80%;
            height: 2px;
            background-color: #fff
          }
          .contentTitle {
            position: absolute;
            width: 80%;
            left: 50%;
            top: -14px;
            transform: translateX(-50%);
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            .redTitle {
              color: #e46c11;
            }
          }
          .lackData{
             padding: 0 15px;
            .gapOfTitle{
               display: inline-block;
                width: 100%;
                 li{
                   float:left;
                   // border:1px solid #5585bf;
                   color:#5585bf;
                   text-align: center;
                   width:percentage(1/18);
                   transform: scale(0.7);
                 }
            }
            .totleTitle{
              display: inline-block;
               width: 100%;
               li{
                  float:left;
                  text-align: center;
                  &.first{
                     width:percentage(1/18);
                  }
                  &.second{
                     width:percentage(1/18*13);
                     position: relative;
                     border-left:1px solid #bfbfbf;
                     border-right:1px solid #bfbfbf;
                     left:percentage(1/18*1);
                     &:before{
                       content:'<';
                       position: absolute;
                       top:0;
                       left:0;
                     }
                     &:after{
                       content:'>';
                       position: absolute;
                       top:0;
                       right:0;
                     }
                     span{
                       display: inline-block;
                       width: 100%;
                       position: relative;
                       &:before{
                         content:'';
                         width: 20%;
                         border:1px solid #bfbfbf;
                         position: absolute;
                         top:51.5%;
                         left:5px;
                       }
                       &:after{
                         content:'';
                         width: 20%;
                         border:1px solid #bfbfbf;
                         position: absolute;
                         top:51.5%;
                         right:5px;
                       }
                     }
                  }
                  &.third{
                     width:percentage(1/18*3);
                     position: relative;
                     border-left:1px solid #bfbfbf;
                     border-right:1px solid #bfbfbf;
                      left:percentage(1/18*1);
                    &:before{
                      content:'<';
                      position: absolute;
                      top:0;
                      left:0;
                    }
                    &:after{
                      content:'>';
                      position: absolute;
                      top:0;
                      right:0;
                    }
                    span{
                      display: inline-block;
                      width: 100%;
                      position: relative;
                      &:before{
                        content:'';
                        width: 20%;
                        border:1px solid #bfbfbf;
                        position: absolute;
                        top:51.5%;
                        left:5px;
                      }
                      &:after{
                        content:'';
                        width: 20%;
                        border:1px solid #bfbfbf;
                        position: absolute;
                        top:51.5%;
                        right:5px;
                      }
                    }
                  }
                  &.fouth{
                     width:percentage(1/18*1);
                  }
               }
            }
          }
        }
          .title {
            font-size: 16px;
            font-weight: 700;
            text-align:center;
          }
        .tableBox {
          margin-right: 10px;
          margin-top: 10px;
          border-top: 1px solid #9abcf1;
          border-left: 1px solid #bfbfbf;
          border-right: 1px solid #bfbfbf;
          border-bottom: 1px solid #bfbfbf;
            /deep/ .el-table.tableTh28 .has-gutter{
           .cell {
              padding:0px !important;
              // transform: scale(0.7);
              line-height: normal !important;
              // height: 15px;
            }
            }
          /deep/ .el-table.tableTh28 {
            .cell {
              padding:5px !important;
              // transform: scale(0.7);
              line-height: normal !important;
              // height: 15px;
            }
            th {
              font-size: 12px;
              height: 23px;
              padding: 0;
              .cell {
                line-height: 20px;
              }
            }
            /deep/ tr.el-table__row td {
              font-size: 12px;
              padding: 0 !important;
            }
          }
          /deep/ .tableTh28 .el-table__header {
            .first-title.is-leaf {
              position: relative;
              border-right: 1px solid #d7e5fb !important;
              .cell {
                color: #d7e5fb;
              }
            }
            .second-title.is-leaf {
              overflow: visible;
              .cell {
                width: 200%;
                left: -75%;
              }
            }
          }
          /deep/ .el-table tr:last-child td {
            color: #333;
            text-align: center;
            border-bottom: 1px solid transparent !important;
            border-right: 1px solid #bfbfbf !important;
          }
        }
      }

    }
  }
</style>
